<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
账户余额还剩<span id="s1"></span>元，收入<span id="s2"></span>元,支出<span id="s3"></span>元;
<br/>
<input placeholder="收入" id="inc"/>
<input placeholder="收入标签" id="incLabel"/>
<br/>
<input placeholder="支出" id="out"/>
<input placeholder="支出标签" id="outLabel">
<br/>
<button onclick="jiyibi()">记一笔</button>
</body>
<script>
    var allDate=localStorage.allData;
    if(allDate){
        allDate=JSON.parse(localStorage.allDate);
    }else{
        allDate={};
        allDate.income=[];
        allDate.fee=[];
        allDate.total=0;
        allDate.totalIncome=0;
        allDate.totalFee=0;
    }
    s1.innerHTML="￥"+allDate.total;
    s2.innerHTML="￥"+allDate.totalIncome;
    s3.innerHTML="￥"+allDate.totalFee;
    function jiyibi() {
       if(inc.value.length>0) {
           var incomeObj = {
               money : parseFloat(inc.value),
               createTime :new Date().toLocaleString(),
               label:incLabel.value
       };
           allDate.income.unshift(incomeObj)
    }
       if(out.value.length>0){
           var feeObj={
               money:parseFloat(out.value),
               createTime:new Date().toLocaleString(),
               label:outLabel.value
           };
           allDate.fee.unshift(feeObj)
       }
       var totalIncome=0;
       for(var i=0;i<allDate.income.length;i++){
           totalIncome+=allDate.income[i].money;
       }
       var totalFee=0;
       for(var i=0;i<allDate.fee.length;i++){
           totalFee+=allDate.fee[i].money;
       }
       var total=totalIncome-totalFee;
       allDate.total=total;
       allDate.totalIncome=totalIncome;
       allDate.totalFee=totalFee;

       s1.innerHTML="￥"+allDate.total;
       s2.innerHTML="￥"+allDate.totalIncome;
       s3.innerHTML="￥"+allDate.totalFee;

       localStorage.allData=JSON.stringify(allDate);
       alert("记账成功");
    }
</script>
</html>